<template>
  <view>
    <view :style="{height: $_screenHeight + 'px'}">
      <u-tabs-swiper ref="uTabs" class="st-absolute" bg-color="transparent" active-color="#fff" inactive-color="#fff" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
                     swiperWidth="750"></u-tabs-swiper>
      <swiper :style="{height: $_screenHeight + 'px'}" :vertical="false" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item :style="{height: $_screenHeight + 'px'}" v-for="(item, index) in tabs" :key="index">
          <swiper :style="{height: $_screenHeight + 'px'}"  :vertical="true">
            <swiper-item v-if="item.length == 0" >sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/>sss<br/></swiper-item>
            <swiper-item v-else :style="{height: $_screenHeight + 'px'}" v-for="($item, $index) in item" :key="$index">
              <u-image width="100%" :height="$_screenHeight + 'px'"
                       :src="$item.picUrl"></u-image>
            </swiper-item>
          </swiper>

        </swiper-item>
      </swiper>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [{
        name: '同城'
      }, {
        name: '邂逅'
      }, {
        name: '我'
      },],
      tabs: [
        [],[],[]
      ],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 1, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 1, // swiper组件的current值，表示当前那个swiper-item是活动的
    };
  },
  onReady(){
    // 加载邂逅数据
    this.loadXiehou()
  },
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {

    },
    // 加载邂逅数据
    loadXiehou() {
      uni.showLoading({
        title: '加载中'
      });
      this.$http.get('/user-info/recommend').then(res => {
        this.tabs.splice(1,1,res.data)
      }).finally(() => {
        uni.hideLoading();
      })
    },
  }
};
</script>
